<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TODO 管理系统</title>
    <!-- 引入axios库 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
    <style>
        :root {
            --primary-color: #4CAF50;
            --secondary-color: #f1f8e9;
            --accent-color: #ff9800;
            --text-color: #333;
            --light-text: #777;
            --border-color: #ddd;
            --background: #f9f9f9;
            --card-background: white;
            --success: #d4edda;
            --error: #f8d7da;
            --warning: #fff3cd;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--background);
            color: var(--text-color);
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        h1 {
            color: var(--primary-color);
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .module {
            background: var(--card-background);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 25px;
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .module:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

        .module h2 {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 15px;
            margin: 0;
            font-size: 1.2em;
            border-bottom: 1px solid rgba(255,255,255,0.2);
        }

        .module-content {
            padding: 15px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }

        input, textarea, select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1em;
            transition: border-color 0.2s;
        }

        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            padding: 10px 15px;
            font-size: 1em;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-right: 10px;
        }

        button:hover {
            background-color: #45a049;
        }

        button:active {
            transform: translateY(1px);
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .message {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            display: none;
            transition: opacity 0.3s;
        }

        .success {
            background-color: var(--success);
            color: #155724;
            display: block;
        }

        .error {
            background-color: var(--error);
            color: #721c24;
            display: block;
        }

        .warning {
            background-color: var(--warning);
            color: #856404;
            display: block;
        }

        .todo-list, .class-list {
            margin-top: 15px;
        }

        .todo-item {
            background-color: var(--secondary-color);
            border-left: 4px solid var(--primary-color);
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 4px;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .todo-item:hover {
            transform: translateX(3px);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .todo-item h3 {
            margin-bottom: 5px;
            color: var(--primary-color);
        }

        .todo-item p {
            margin: 5px 0;
            color: var(--text-color);
        }

        .status-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 0.85em;
            font-weight: 500;
            margin-left: 10px;
        }

        .status-0 {
            background-color: var(--accent-color);
            color: white;
        }

        .status-1 {
            background-color: var(--primary-color);
            color: white;
        }

        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 5px;
        }

        .pagination button {
            padding: 8px 12px;
        }

        .class-item {
            display: inline-block;
            background-color: #e8f5e9;
            color: #2e7d32;
            padding: 5px 10px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .class-item:hover {
            background-color: #c8e6c9;
        }

        .flex-container {
            display: flex;
            gap: 15px;
            margin-bottom: 15px;
        }

        .flex-container > * {
            flex: 1;
        }

        @media (max-width: 600px) {
            .flex-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <h1>TODO 管理系统</h1>

    <!-- API配置模块 -->
    <div class="module">
        <h2>API 配置</h2>
        <div class="module-content">
            <input type="text" id="apiBaseUrl" placeholder="请输入API基础URL，例如: http://localhost:8080" value="http://localhost:8080">
            <button onclick="setApiBaseUrl()">保存配置</button>
            <div id="apiConfigMsg" class="message"></div>
        </div>
    </div>

    <!-- TODO 模块 -->
    <div class="module">
        <h2>TODO 操作</h2>
        <div class="module-content">
            <!-- 新增 TODO -->
            <div class="form-group">
                <h3>新增 TODO</h3>
                <div class="flex-container">
                    <div>
                        <label for="todoTitle">标题</label>
                        <input type="text" id="todoTitle" placeholder="请输入标题">
                    </div>
                    <div>
                        <label for="todoDdl">截止时间</label>
                        <input type="datetime-local" id="todoDdl" placeholder="截止时间">
                    </div>
                </div>
                <div>
                    <label for="todoMessage">内容</label>
                    <textarea id="todoMessage" placeholder="请输入内容" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="todoClass">分类（可选）</label>
                    <select id="todoClass" multiple size="3">
                        <!-- 动态加载分类选项 -->
                    </select>
                </div>
                <button onclick="addTodo()">新增</button>
                <div id="addTodoMsg" class="message"></div>
            </div>

            <!-- 更改 TODO -->
            <div class="form-group">
                <h3>更改 TODO</h3>
                <div class="flex-container">
                    <div>
                        <label for="updateTodoId">ID</label>
                        <input type="text" id="updateTodoId" placeholder="请输入要修改的 ID">
                    </div>
                    <div>
                        <label for="updateTodoStatus">状态</label>
                        <select id="updateTodoStatus">
                            <option value="0">未完成</option>
                            <option value="1">已完成</option>
                        </select>
                    </div>
                </div>
                <div class="flex-container">
                    <div>
                        <label for="updateTodoTitle">新标题</label>
                        <input type="text" id="updateTodoTitle" placeholder="新标题">
                    </div>
                    <div>
                        <label for="updateTodoDdl">新截止时间</label>
                        <input type="datetime-local" id="updateTodoDdl" placeholder="新截止时间">
                    </div>
                </div>
                <div>
                    <label for="updateTodoMessage">新内容</label>
                    <textarea id="updateTodoMessage" placeholder="新内容" rows="3"></textarea>
                </div>
                <button onclick="updateTodo()">更改</button>
                <div id="updateTodoMsg" class="message"></div>
            </div>

            <!-- 删除 TODO -->
            <div class="form-group">
                <h3>删除 TODO</h3>
                <input type="text" id="deleteTodoId" placeholder="请输入要删除的 ID">
                <button onclick="deleteTodo()">删除</button>
                <div id="deleteTodoMsg" class="message"></div>
            </div>

            <!-- 获取 TODO -->
            <div class="form-group">
                <h3>获取 TODO</h3>
                <div class="flex-container">
                    <div>
                        <label>分页</label>
                        <div class="flex-container">
                            <div>
                                <input type="number" id="todoPage" value="1" min="1" placeholder="页码">
                            </div>
                            <div>
                                <input type="number" id="todoRows" value="10" min="1" placeholder="每页数量">
                            </div>
                        </div>
                    </div>
                    <div>
                        <label>ID 查询</label>
                        <input type="text" id="getTodoId" placeholder="请输入要查询的 ID">
                    </div>
                </div>
                <div class="flex-container">
                    <button onclick="getAllTodos()">获取全部 TODO</button>
                    <button onclick="getTodoById()">根据 ID 获取</button>
                </div>
                <div class="pagination" id="todoPagination"></div>
                <div class="todo-list" id="todoList"></div>
            </div>
        </div>
    </div>

    <!-- 分类模块 -->
    <div class="module">
        <h2>分类操作</h2>
        <div class="module-content">
            <!-- 新增分类 -->
            <div class="form-group">
                <h3>新增分类</h3>
                <input type="text" id="className" placeholder="请输入分类名称">
                <button onclick="addClass()">新增</button>
                <div id="addClassMsg" class="message"></div>
            </div>

            <!-- 删除分类 -->
            <div class="form-group">
                <h3>删除分类</h3>
                <input type="text" id="deleteClassIds" placeholder="请输入要删除的分类 ID，多个用逗号分隔">
                <button onclick="deleteClass()">删除</button>
                <div id="deleteClassMsg" class="message"></div>
            </div>

            <!-- 获取分类 -->
            <div class="form-group">
                <h3>获取分类</h3>
                <button onclick="getAllClasses()">获取全部分类</button>
                <div class="class-list" id="classList"></div>
            </div>
        </div>
    </div>
</div>

<script>
    // 保存当前API基础URL
    let currentApiBaseUrl = 'http://localhost:8080';

    // 当前登录用户的 token
    let token = 'csmht';
    // 当前分页参数
    let currentPage = 1;
    const pageSize = 10;

    // 接口地址变量（集中管理）
    const API = {
        // TODO 相关接口
        TODO: {
            ADD: `${currentApiBaseUrl}/todo`,               // 新增（PUT）
            UPDATE: `${currentApiBaseUrl}/todo`,            // 更改（POST）
            DELETE: `${currentApiBaseUrl}/todo`,            // 删除（DELETE）
            GET_ALL: `${currentApiBaseUrl}/todo/list`,      // 获取全部（POST，分页）
            GET_BY_ID: `${currentApiBaseUrl}/todo/{id}`     // 根据ID获取（GET）
        },
        // 分类相关接口
        CLASS: {
            ADD: `${currentApiBaseUrl}/class`,              // 新增（PUT）
            DELETE: `${currentApiBaseUrl}/class`,           // 删除（DELETE）
            GET_ALL: `${currentApiBaseUrl}/class`           // 获取全部（GET）
        }
    };

    // 创建axios实例
    const axiosInstance = axios.create({
        baseURL: currentApiBaseUrl,
        timeout: 10000,
        headers: {
            'Content-Type': 'application/json',
            'token': token
        },
        withCredentials: true // 支持跨域请求
    });

    // 请求拦截器
    axiosInstance.interceptors.request.use(
        config => {
            // 在发送请求之前做些什么
            config.headers['token'] = token;
            return config;
        },
        error => {
            // 对请求错误做些什么
            console.error('请求错误:', error);
            return Promise.reject(error);
        }
    );

    // 响应拦截器
    axiosInstance.interceptors.response.use(
        response => {
            // 对响应数据做点什么
            return response.data;
        },
        error => {
            // 对响应错误做点什么
            console.error('响应错误:', error);
            let message = '网络请求失败';
            if (error.response) {
                // 请求已发送，服务器返回状态码不是2xx
                message = `错误 ${error.response.status}: ${error.response.data.message || '服务器错误'}`;
            } else if (error.request) {
                // 请求已发送，但没有收到响应
                message = '没有收到服务器响应';
            } else {
                // 在设置请求时触发错误
                message = '请求配置错误: ' + error.message;
            }
            return Promise.reject({ message });
        }
    );

    // 显示消息提示
    function showMessage(elementId, message, type = 'success') {
        const msgEl = document.getElementById(elementId);
        msgEl.textContent = message;
        msgEl.className = `message ${type}`;

        // 3秒后自动隐藏消息
        setTimeout(() => {
            msgEl.style.opacity = '0';
            setTimeout(() => {
                msgEl.style.display = 'none';
                msgEl.style.opacity = '1';
            }, 300);
        }, 3000);
    }

    // 格式化日期时间
    function formatDateTime(dateTime) {
        if (!dateTime) return '';
        // 假设日期格式为 "2025-11-11T00:00:00"
        return dateTime.replace('T', ' ').substring(0, 16);
    }

    // 设置API基础URL
    function setApiBaseUrl() {
        const url = document.getElementById('apiBaseUrl').value.trim();
        if (!url) {
            showMessage('apiConfigMsg', 'URL不能为空', 'error');
            return;
        }

        // 检查URL格式
        if (!url.startsWith('http://') && !url.startsWith('https://')) {
            showMessage('apiConfigMsg', '请输入有效的URL，需包含http://或https://', 'error');
            return;
        }

        currentApiBaseUrl = url;
        updateApiUrls();

        // 更新axios实例的baseURL
        axiosInstance.defaults.baseURL = currentApiBaseUrl;

        showMessage('apiConfigMsg', 'API配置已更新');

        // 重新加载数据
        getAllClasses();
        getAllTodos();
    }

    // 更新API对象中的所有URL
    function updateApiUrls() {
        // TODO 相关接口
        API.TODO.ADD = `${currentApiBaseUrl}/todo`;
        API.TODO.UPDATE = `${currentApiBaseUrl}/todo`;
        API.TODO.DELETE = `${currentApiBaseUrl}/todo`;
        API.TODO.GET_ALL = `${currentApiBaseUrl}/todo/list`;
        API.TODO.GET_BY_ID = `${currentApiBaseUrl}/todo/{id}`;

        // 分类相关接口
        API.CLASS.ADD = `${currentApiBaseUrl}/class`;
        API.CLASS.DELETE = `${currentApiBaseUrl}/class`;
        API.CLASS.GET_ALL = `${currentApiBaseUrl}/class`;
    }

    // 页面加载时初始化分类数据
    window.onload = function() {
        getAllClasses();
    };

    // 新增 TODO
    function addTodo() {
        const title = document.getElementById('todoTitle').value.trim();
        const message = document.getElementById('todoMessage').value.trim();
        const ddl = document.getElementById('todoDdl').value.trim();
        const classs = Array.from(document.getElementById('todoClass').selectedOptions).map(option => option.value);

        // 验证
        if (!ddl) {
            showMessage('addTodoMsg', '截止时间不能为空', 'error');
            return;
        }

        axiosInstance.put(API.TODO.ADD, { title, message, ddl, classs })
            .then(data => {
                showMessage('addTodoMsg', data.message || '新增成功');
                // 清空输入
                document.getElementById('todoTitle').value = '';
                document.getElementById('todoMessage').value = '';
                document.getElementById('todoDdl').value = '';
                document.getElementById('todoClass').selectedIndex = -1;

                // 刷新 TODO 列表
                getAllTodos();
            })
            .catch(err => {
                showMessage('addTodoMsg', '新增失败：' + err.message, 'error');
            });
    }

    // 更改 TODO
    function updateTodo() {
        const id = document.getElementById('updateTodoId').value.trim();
        const title = document.getElementById('updateTodoTitle').value.trim();
        const message = document.getElementById('updateTodoMessage').value.trim();
        const ddl = document.getElementById('updateTodoDdl').value.trim();
        const status = document.getElementById('updateTodoStatus').value;

        // 验证
        if (!id || (!title && !message && !ddl && status === null)) {
            showMessage('updateTodoMsg', 'ID和至少一个修改字段不能为空', 'error');
            return;
        }

        // 只发送有值的字段
        const updateData = { id };
        if (title) updateData.title = title;
        if (message) updateData.message = message;
        if (ddl) updateData.ddl = ddl;
        if (status !== null) updateData.status = parseInt(status);

        axiosInstance.post(API.TODO.UPDATE, updateData)
            .then(data => {
                showMessage('updateTodoMsg', data.message || '更改成功');
                // 清空输入
                document.getElementById('updateTodoId').value = '';
                document.getElementById('updateTodoTitle').value = '';
                document.getElementById('updateTodoMessage').value = '';
                document.getElementById('updateTodoDdl').value = '';

                // 刷新 TODO 列表
                getAllTodos();
            })
            .catch(err => {
                showMessage('updateTodoMsg', '更改失败：' + err.message, 'error');
            });
    }

    // 删除 TODO
    function deleteTodo() {
        const id = document.getElementById('deleteTodoId').value.trim();

        if (!id) {
            showMessage('deleteTodoMsg', 'ID 不能为空', 'error');
            return;
        }

        if (!confirm(`确定要删除 ID 为 ${id} 的 TODO 吗？`)) {
            return;
        }

        axiosInstance.delete(API.TODO.DELETE, { data: { id } })
            .then(data => {
                showMessage('deleteTodoMsg', data.message || '删除成功');
                document.getElementById('deleteTodoId').value = '';
                // 刷新 TODO 列表
                getAllTodos();
            })
            .catch(err => {
                showMessage('deleteTodoMsg', '删除失败：' + err.message, 'error');
            });
    }

    // 获取全部 TODO（分页）
    function getAllTodos() {
        const listEl = document.getElementById('todoList');
        const page = document.getElementById('todoPage').value || currentPage;
        const rows = document.getElementById('todoRows').value || pageSize;
        currentPage = page;

        listEl.innerHTML = '<div class="message warning">加载中...</div>';

        axiosInstance.post(API.TODO.GET_ALL, { page, rows })
            .then(data => {
                if (data.code === '200' && data.date && data.date.todos) {
                    const todos = Array.isArray(data.date.todos) ? data.date.todos : [data.date.todos];

                    if (todos.length === 0) {
                        listEl.innerHTML = '<div class="message">暂无数据</div>';
                    } else {
                        listEl.innerHTML = todos.map(todo => `
                            <div class="todo-item">
                                <h3>${todo.title}
                                    <span class="status-badge status-${todo.status}">
                                        ${todo.status === 1 ? '已完成' : '未完成'}
                                    </span>
                                </h3>
                                <p><strong>ID：</strong>${todo.id}</p>
                                <p><strong>内容：</strong>${todo.message}</p>
                                <p><strong>截止时间：</strong>${formatDateTime(todo.ddl)}</p>
                                ${todo.classs && todo.classs.length ?
                            `<p><strong>分类：</strong>${todo.classs.map(c => c.name).join(', ')}</p>` : ''}
                                <button onclick="fillUpdateForm('${todo.id}', '${todo.title}', '${todo.message}', '${todo.ddl}', '${todo.status}')">编辑</button>
                                <button onclick="deleteTodoById('${todo.id}')">删除</button>
                            </div>
                        `).join('');
                    }

                    renderPagination();
                } else {
                    listEl.innerHTML = `<div class="message error">${data.message || '获取失败'}</div>`;
                }
            })
            .catch(err => {
                listEl.innerHTML = `<div class="message error">获取失败：${err.message}</div>`;
            });
    }

    // 预填充编辑表单
    function fillUpdateForm(id, title, message, ddl, status) {
        document.getElementById('updateTodoId').value = id;
        document.getElementById('updateTodoTitle').value = title;
        document.getElementById('updateTodoMessage').value = message;
        document.getElementById('updateTodoDdl').value = ddl;
        document.getElementById('updateTodoStatus').value = status;

        // 滚动到编辑表单
        document.querySelector('h3:contains("更改 TODO")').scrollIntoView({ behavior: 'smooth' });
    }

    // 直接删除指定ID的TODO
    function deleteTodoById(id) {
        document.getElementById('deleteTodoId').value = id;
        deleteTodo();
    }

    // 渲染分页控件
    function renderPagination() {
        const paginationEl = document.getElementById('todoPagination');
        paginationEl.innerHTML = `
                <button onclick="changePage(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''}>上一页</button>
                <span>第 ${currentPage} 页</span>
                <button onclick="changePage(${currentPage + 1})">下一页</button>
            `;
    }

    // 切换页码
    function changePage(page) {
        if (page < 1) return;
        document.getElementById('todoPage').value = page;
        getAllTodos();
    }

    // 根据 ID 获取 TODO
    function getTodoById() {
        const id = document.getElementById('getTodoId').value.trim();
        const listEl = document.getElementById('todoList');

        if (!id) {
            showMessage('todoList', 'ID 不能为空', 'error');
            return;
        }

        const url = API.TODO.GET_BY_ID.replace('{id}', id);
        axiosInstance.get(url)
            .then(data => {
                if (data.code === '200' && data.date) {
                    const todo = data.date;
                    listEl.innerHTML = `
                        <div class="todo-item">
                            <h3>${todo.title}
                                <span class="status-badge status-${todo.status}">
                                    ${todo.status === 1 ? '已完成' : '未完成'}
                                </span>
                            </h3>
                            <p><strong>ID：</strong>${todo.id}</p>
                            <p><strong>内容：</strong>${todo.message}</p>
                            <p><strong>截止时间：</strong>${formatDateTime(todo.ddl)}</p>
                            ${todo.classs && todo.classs.length ?
                        `<p><strong>分类：</strong>${todo.classs.map(c => c.name).join(', ')}</p>` : ''}
                            <button onclick="fillUpdateForm('${todo.id}', '${todo.title}', '${todo.message}', '${todo.ddl}', '${todo.status}')">编辑</button>
                            <button onclick="deleteTodoById('${todo.id}')">删除</button>
                        </div>
                    `;
                } else {
                    showMessage('todoList', data.message || '获取失败', 'error');
                }
            })
            .catch(err => {
                listEl.innerHTML = `<div class="message error">获取失败：${err.message}</div>`;
            });
    }

    // 新增分类
    function addClass() {
        const name = document.getElementById('className').value.trim();

        if (!name) {
            showMessage('addClassMsg', '分类名称不能为空', 'error');
            return;
        }

        axiosInstance.put(API.CLASS.ADD, { name })
            .then(data => {
                showMessage('addClassMsg', data.message || '新增分类成功');
                document.getElementById('className').value = '';
                // 刷新分类列表
                getAllClasses();
            })
            .catch(err => {
                showMessage('addClassMsg', '新增分类失败：' + err.message, 'error');
            });
    }

    // 删除分类
    function deleteClass() {
        const ids = document.getElementById('deleteClassIds').value.trim();

        if (!ids) {
            showMessage('deleteClassMsg', '分类 ID 不能为空', 'error');
            return;
        }

        if (!confirm(`确定要删除 ID 为 ${ids} 的分类吗？`)) {
            return;
        }

        // 处理多个ID的情况
        const idArray = ids.split(',').map(id => id.trim());

        axiosInstance.delete(API.CLASS.DELETE, { data: { ids: idArray } })
            .then(data => {
                showMessage('deleteClassMsg', data.message || '删除分类成功');
                document.getElementById('deleteClassIds').value = '';
                // 刷新分类列表
                getAllClasses();
                // 刷新 TODO 列表，因为可能有 TODO 关联了这些分类
                getAllTodos();
            })
            .catch(err => {
                showMessage('deleteClassMsg', '删除分类失败：' + err.message, 'error');
            });
    }

    // 获取全部分类
    function getAllClasses() {
        const listEl = document.getElementById('classList');
        const selectEl = document.getElementById('todoClass');

        listEl.innerHTML = '<div class="message warning">加载中...</div>';

        axiosInstance.get(API.CLASS.GET_ALL)
            .then(data => {
                if (data.code === '200' && data.date && data.date.classs) {
                    const classes = Array.isArray(data.date.classs) ? data.date.classs : [data.date.classs];

                    if (classes.length === 0) {
                        listEl.innerHTML = '<div class="message">暂无分类</div>';
                        selectEl.innerHTML = '<option value="">暂无分类</option>';
                    } else {
                        // 渲染分类列表
                        listEl.innerHTML = classes.map(cls => `
                            <div class="class-item" onclick="selectClass('${cls.id}')">
                                ${cls.name} (ID: ${cls.id})
                            </div>
                        `).join('');

                        // 填充分类选择下拉框
                        selectEl.innerHTML = classes.map(cls => `
                            <option value="${cls.id}">${cls.name}</option>
                        `).join('');
                    }
                } else {
                    listEl.innerHTML = `<div class="message error">${data.message || '获取分类失败'}</div>`;
                    selectEl.innerHTML = '<option value="">获取分类失败</option>';
                }
            })
            .catch(err => {
                listEl.innerHTML = `<div class="message error">获取分类失败：${err.message}</div>`;
                selectEl.innerHTML = '<option value="">获取分类失败</option>';
            });
    }

    // 选择分类（用于在分类列表中点击时自动填充到删除输入框）
    function selectClass(id) {
        const deleteInput = document.getElementById('deleteClassIds');
        // 如果已有ID，用逗号分隔添加新ID
        if (deleteInput.value) {
            deleteInput.value += ',' + id;
        } else {
            deleteInput.value = id;
        }
    }
</script>
</body>
</html>